<template>
  <el-menu mode="horizontal" :default-active="activeItem" class="header-menu a-link-item">
    <el-menu-item index="/">
      <router-link to="/">首页</router-link>
    </el-menu-item>
    <el-menu-item :index="`/${$rp.SPACES}`" :class="remedyClass">
      <router-link :to="`/${$rp.SPACES}`">学习空间</router-link>
    </el-menu-item>
    <el-menu-item :index="`/${$rp.COMMUNITIES}`">
      <router-link :to="`/${$rp.COMMUNITIES}`">学习社区</router-link>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'HeaderMenu', // 页头的导航
  computed: {
    // 从url获取当前激活的类型
    activeItem() { return `/${this.$route.path.split('/')[1]}`; },
    // 因为 el-menu-item 只能匹配一个 index 高亮，当激活收藏空间时，页头`学习空间`没有高亮，需要手动添加
    remedyClass() {
      return this.activeItem.includes('/spaces') ? 'is-active' : ''; // 这是el-menu-item的激活样式
    },
  },
};
</script>

<style lang="scss">
.el-menu.header-menu .el-menu-item {
    font-size: 1.0625rem;
    font-weight: 600;

    &.is-active {
      color: #2162a4;
      border-bottom: .25rem solid #2162a4 !important; // 避免被 el-menu 添加的内联样式覆盖
    }
}
</style>
